import React from "react";
import BaseScreen from "../BaseScreen";
import ProgressView from "../../view/ProgressView";
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/attendance.module.css";
import { back } from "../../utils/LocationUtil";
import { MyButton } from "../../view/MyButton";
import { AVATAR } from "../../const/imgs"
import { HintDialog } from '../../view/Dialog'
import ShowImgList from '../components/ShowImgs'
import { applyDetail, cancelApply } from '../../service/AttendService'
import { getPics } from '../../utils/CommomUtil'
import { getTOKEN, getInfo } from "../../utils/StorageUtil";
class ApplyDetail extends BaseScreen {
  constructor(props) {
    super(props)
    this.state = {
      recordDetail: {},
      loading: false
    }
  }
  componentDidMount() {
    document.title = this.props.recordType === 1 ? '申请详情' : '补卡申请'
    this.getDetail()
  }
  getDetail = () => {
    this.setState({ loading: true });

    applyDetail({
      token: getTOKEN(),
      apply_type: this.props.recordType ? this.props.recordType : getInfo('RecordInfo').type,
      id: this.props.recordId ? this.props.recordId : getInfo('RecordInfo').id,
    })
      .then(
        res => {
          this.setState({ loading: false });
          if (res.error_code === 0) {
            this.setState({
              type: this.props.recordType ? this.props.recordType : getInfo('RecordInfo').type,
              recordDetail: res.data,
            })
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  // 是否取消
  IsCancel = (id, type) => {
    this.showMsgDialog("你确定要放弃申请吗")
    this.setState({
      canselId: id,
      canselType: type
    })
  }
  // 取消
  cancel = () => {
    this.setState({ loading: false });

    cancelApply({
      token: getTOKEN(),
      apply_type: this.state.canselType,
      id: this.state.canselId
    })
      .then(
        res => {
          this.setState({ loading: true });

          if (res.error_code === 0) {
            this.refs.summit.setState({
              content: '取消成功',
              visibility: true
            });

          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  render() {
    const { recordDetail, loading, type, } = this.state
    const {
      id,
      status,                 // 审批结果 (1申请成功 2申请中 3申请失败)
      // approve_user_id,        // 审批用户id
      zh_approve_time,           // 审批时间
      zh_create_time,   // 申请创建时间
      no, // 编号
      comment,      //原因
      photo_json,            // 图片列表
    } = recordDetail
    return (
      <div className={styles["homes"]}>

        {parseInt(type,10) === 1 &&
          <ApplyInfoLeave
            recordDetail={recordDetail}
          />
        }
        {parseInt(type,10) === 2 &&
          <ApplyInfoBuka
            recordDetail={recordDetail}
          />}
        <div className={styles['attend_container']}>
          <ApplyCell name={'审批编号'} value={no} />
          {/* <ApplyCell name={'所在机构'} value={'佛山一组'} style={{ color: Config.BaseColor }} /> */}
          <ApplyCell name={'原因'} value={''} />
          <div className={styles['stat_item_w']} style={{ height: '100px', padding: '15px' }}>
            <div className={styles['stat_item_borderBottom']} style={{ display: 'block', textAlign: 'justify' }}>
              <div className={styles['stat_item_value']}>
                {comment}
              </div>
            </div>
          </div>
        </div>
        {(photo_json !== undefined && photo_json !== null && photo_json.length > 10) &&
          <div className={styles['attend_container']}>
            <div className={styles['stat_item_w']}>
              图片
          </div>
            <div className={styles['attend_item_w']}>
              <ShowImgList imgList={getPics(photo_json)} isAll={false}  isShowAll={true} />
            </div>
          </div>}
        <div className={styles['attend_container']}>
          <div className={styles['attend_item_w']} style={{ padding: '0 15px' }} >
            <div className={styles['progress_wrapper']}>
              <div className={styles['progress_line']}></div>
              {status && <ProgressItem status={status} time={zh_create_time} index='0' />}
              {(status && parseInt(status,10) !== 2) && <ProgressItem status={status} time={zh_approve_time} index='1' />}
            </div>
          </div>
        </div>
        {parseInt(status,10) === 2 &&
          <div className={styles['btn_wrapper']} style={{ padding: '40px 0 40px' }}>
            <MyButton
              style={{
                width: '80%',
                borderRadius: '0.3rem'
              }}
              name={"取消申请"}
              onClick={() => {
                this.IsCancel(id, type);
              }}
            />
          </div>}
        <HintDialog
          ref="dialog"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={this.cancel}
        />
        <HintDialog
          ref="summit"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={() => { back() }}
        />
        <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />

      </div>
    )
  }
}

const ApplyInfoLeave = ({
  recordDetail: {
    diff_time,  //  请假时长
    status,
    start_date,
    end_date,
    zh_approve_time
  } }) => {
  return (
    <div>
      <div className={styles['attend_container']}>
        <div className={styles['stat_item_w']} style={{ height: '60px' }}>
          <div className={styles['record_info']}>
            <div className={styles['record_avatar']}>
              <img src={getInfo('UserInfo').sex === 1 ? AVATAR.male : AVATAR.famale} alt='' />
            </div>
            {/* <div> */}
            <div className={styles['stat_item_key']} style={{ fontWeight: '600' }}>
              请假申请
                </div>
            {/* <div className={styles['stat_item_value']}>
              请假申请
               </div> */}
            {/* </div> */}
          </div>
          <div className={styles['record_state']}>
            <div className={styles['stat_item_value']}>
              {parseInt(status, 10) === 2 && '已同意'}
              {parseInt(status, 10) === 1 && '申请中'}
              {parseInt(status, 10) === 3 && '已拒绝'}
            </div>
          </div>
        </div>
      </div>
      <div className={styles['attend_container']}>
        <ApplyCell name={'申请时间'} value={zh_approve_time} />
        <ApplyCell name={'开始日期'} value={start_date.substr(0,4)+'-'+start_date.substr(4,2)+'-'+start_date.substr(6,2)} />
        <ApplyCell name={'结束日期'} value={end_date.substr(0,4)+'-'+end_date.substr(4,2)+'-'+end_date.substr(6,2)} />
        <ApplyCell name={'请假天数'} value={diff_time / 3600 >= 24 ? Math.ceil(diff_time / (3600 * 24)) + '天' : (diff_time / 3600) + '小时'} />
      </div>

    </div>
  )
}
const ApplyInfoBuka = ({
  recordDetail: {
    status,                 // 审批结果 (1申请成功 2申请中 3申请失败)
    class_cn_name, // 补卡详情
  } }) => {
  return (
    <div>
      <div className={styles['attend_container']}>
        <div className={styles['stat_item_w']} style={{ height: '60px' }}>
          <div className={styles['record_info']}>
            <div className={styles['record_avatar']}>
              <img src={getInfo('UserInfo').sex === 1 ? AVATAR.male : AVATAR.famale} alt='' />
            </div>
            {/* <div> */}
            <div className={styles['stat_item_key']} style={{ fontWeight: '600' }}>
              补卡申请
                </div>
            {/* <div className={styles['stat_item_value']}>
              补卡申请
               </div> */}
            {/* </div> */}
          </div>
          <div className={styles['record_state']}>
            <div className={styles['stat_item_value']}>
              {parseInt(status, 10) === 1 && '已同意'}
              {parseInt(status, 10) === 2 && '申请中'}
              {parseInt(status, 10) === 3 && '已拒绝'}
            </div>
          </div>
        </div>
      </div>
      <div className={styles['attend_container']}>
        <ApplyBuka name='补卡班次' value={class_cn_name} />
      </div>
    </div>
  )
}
const ApplyBuka = ({ name, value, style }) => {
  return (
    <div className={styles['stat_item_w']} style={{ minHeight: '60px' }}>
      <div style={{
        minHeight: '60px',
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-around', padding: '8px 0'
      }} >
        <div className={styles['stat_item_key']}>
          {name}
        </div>
        <div className={styles['stat_item_value']}
          style={{ ...style }}
        >
          {value}
        </div>
      </div>
    </div>
  )
}
const ApplyCell = ({ name, value, style }) => {
  return (
    <div className={styles['stat_item_w']}>
      <div className={styles['stat_item_borderBottom']}>

        <div className={styles['stat_item_key']}>
          {name}
        </div>
        <div className={styles['stat_item_value']}
          style={{ ...style }}
        >
          {value}
        </div>
      </div>
    </div>
  )
}
const ProgressItem = ({ status, time, index }) => {
  return (
    <div className={styles['progress_item']}>
      <div className={styles['progress_line_wrapper']}>
        <div className={styles['progress_line_top']}
          style={{ background: index === '0' ? '#fff' : '' }}
        >
        </div>
        <div className={styles['progress_line_bottom']}>
        </div>
      </div>
      <div className={styles['progress_item_content']}>
        <div className={styles['stat_item']} style={{ padding: 0, marginLeft: '-30px' }}>
          <div className={styles['record_info']}>
            <div className={styles['record_avatar']} style={{ width: '30px', height: '30px', borderRadius: '50%' }}>
              {(index === '0') &&
                <img src={getInfo('UserInfo').sex === 1 ? AVATAR.male : AVATAR.famale} alt=''
                  style={{ width: '30px' }}
                />
              }
              {(status !== 2 && index === '1') &&
                <img src={AVATAR.famale} alt=''
                  style={{ width: '30px' }}
                />
              }
            </div>
            <div className={styles['stat_item_key']}>
              {index === '0' &&
                <span>发起申请</span>
              }
              {(parseInt(status,10) === 1 && index === '1') &&
                <span>审批通过</span>
              }
              {(parseInt(status,10) === 3 && index === '1') &&
                <span style={{ color: 'red' }}>审批未通过</span>
              }
               {(parseInt(status,10) === 4 && index === '1') &&
                <span style={{ color: 'red' }}>已取消</span>
              }
            </div>
          </div>
          <div className={styles['record_state']} style={{ color: '#9ea2ac' }}>
            {time}
          </div>
        </div>
      </div>
    </div>
  )
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    applyTab(applyTabIndex) {
      let params = {
        applyTabIndex: applyTabIndex
      };
      dispatch(Actions.actionTaskTab(params));
    },
    setRecordId(id) {
      let params = {
        recordId: id
      };
      dispatch(Actions.actionSetRecordId(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ApplyDetail);
// export default ApplyDetail